<template>
  <div class="mainBox">
    <AppHeader @changeTab="changeTabFnc"/>
    <div class="tabBlock" v-if="currentTab == 0">
      <div class="info">
        <div class="infopool">
          <label v-if="code">工号：{{ code }} ,</label>
          <label v-if="name">名称：{{ name }} ,</label>
          <label>手机号：</label>
          <div class="tlbos">
            <input v-model="telephone" @keyup.enter="poolInfo" />
            <button @click="makeNewCard" @mouseenter="handleMouseenter" ref="buka">{{ txt }}</button>
          </div>
          <!-- <div><button @click="poolInfo">确定</button></div> -->
        </div>
      </div>
      <Calendar :textTop="['天', '一', '二', '三', '四', '五', '六']" v-on:choseDay="clickDay" :markDate="selectDate" :sundayStart="true"
        @changeMonth="handlechangeMonth">
      </Calendar>
    </div>

    <div class="tabBlock" v-if="currentTab == 1">
      <div class="info">
        其他
      </div>
    </div>

    <div class="tabBlock" v-if="currentTab == 2">
      <div class="info">
        吊毛
      </div>
    </div>
  </div>
</template>

<script>
import Calendar from "vue-calendar-component";
import AppHeader from '@/components/AppHeader.vue';
import request from "@/utils/request";
import alertTips from "@/utils/alertTips";

export default {
  components: {
    AppHeader,
    Calendar
  },
  data() {
    return {
      selectDate: [], //选中的日期
      id: "",
      telephone: "",
      code: "",
      name: "",
      month: "",
      clockIn: {
        phone: ""
      },
      loading: null,
      txt: "补卡",
      currentTab:0,
    };
  },
  created() {
    let myDate = new Date();
    let tY = myDate.getFullYear(); //得到当前年
    let tM = myDate.getMonth() + 1; //得到当前月+1
    let tD = new Date(tY, tM, 0);
    let tT = tD.getDate(); //得到当前月的天数
    this.month = tY + "-" + tM + "-" + tT;
    console.log("初始化月份===>{}", this.month);
  },
  methods: {
    changeTabFnc(e){
      console.log(e,'eeee===》');
      this.currentTab = e
    },
    handlechangeMonth(data) {
      this.selectDate = [];

      console.log("切换月份===>{}", data);

      let monthre = data.replace("/", "-");
      let monthre2 = monthre.replace("/", "-");
      console.log("替换切换月份===>{}", monthre2);
      this.month = monthre2;

      this.openRecord();
    },
    makeNewCard() {
      let localDates = [];
      for (const data in this.selectDate) {
        let makeNewCardDate = this.selectDate[data]
          .replace("/", "-")
          .replace("/", "-");
        let yer = makeNewCardDate.substring(0, 5);
        let mothDay = makeNewCardDate.substring(5);

        let mothDays = mothDay.split("-");
        let moth = mothDays[0] < 10 ? "0" + mothDays[0] : mothDays[0];
        let day = mothDays[1] < 10 ? "0" + mothDays[1] : mothDays[1];
        console.log(moth, "mo");
        console.log(yer, "yer");
        localDates.push(`${yer}${moth}-${day}`);
      }
      request({
        url: "https://www.changzhile.net/changle-study-oa/clockIn/saveOrUpdate",
        data: {
          phone: this.telephone,
          localDates,
        },
        method: "post",
      }).then((response) => {
        console.log("获取打卡记录===>", response.data);
        alertTips.messageTipsSuccess("补卡成功", 3);
      });
    },
    poolInfo() {
      console.log("手机号为===>{}", this.telephone);
      if (!this.telephone) return;
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      request({
        url:
          "https://www.changzhile.net/changle-study-information/feign/Student/getTelephone?telephone=" +
          this.telephone,
        method: "get",
      }).then((response) => {
        console.log("登录信息===>", response);
        alertTips.messageTipsSuccess("获取人员信息成功", 3);
        this.id = response.id;
        this.telephone = response.telephone;
        this.code = response.code;
        this.name = response.name;
        this.openRecord();
      });
    },
    openRecord() {
      if (!this.telephone) return;
      let params = {
        studentId: this.id,
        date: this.month,
      };
      console.log("获取打卡记录发起===>", params);
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      console.log("this.month" + this.month)

      request({
        url:
          "https://www.changzhile.net/changle-study-oa/study/oa/punchCar/record?studentId=" +
          this.id +
          "&date=" +
          this.month,
        data: params,
        method: "post",
      })
        .then((response) => {
          this.loading.close();
          this.selectDate = [];
          console.log("获取打卡记录===>", response.data);
          let ym = response.data.day;
          let y = ym.slice(0, 4);
          let m = ym.slice(5);
          console.log("年===>，月===>", y, m);
          for (const data in response.data.list) {
            console.log("记录天项===>", response.data.list[data]);

            let status = response.data.list[data].status;
            if ("1" == status) {
              let day = response.data.list[data].index;
              console.log("记录天===>", data);

              let temp = y + "/" + m + "/" + day;
              this.selectDate.push(temp);
            }
          }
          console.log("记录===>", this.selectDate);
        })
        .catch(() => {
          this.loading.close();
        });
    },
    resetSelect() {
      //重置选中的日期
      this.selectDate = [];
    },
    clickDay(today) {
      //选中日期
      // today格式为2020/8/7 改为 20200807
      console.log("当前选中日期===>", today);
      let existDate = this.selectDate;
      let isExist = true;
      for (var i = 0; i < existDate.length; i++) {
        if (existDate[i] === today) {
          console.log("当前日期存已在===>", today);
          this.selectDate.splice(i, 1);
          isExist = false;
        }
      }
      if (isExist) {
        //当前日期存在移除
        console.log("不存在-添加===>");
        // let tempDate = { date: today};
        let tempDate = today;
        this.selectDate.push(tempDate);
      }
      console.log("this.selectDate===>", JSON.stringify(this.selectDate));
    },
    //键盘事件
    handleRegister(e) {
      if (e.key === 'Enter' && e.ctrlKey) {
        console.log('%c [ e ]: ', 'color: #bf2c9f; background: pink; font-size: 13px;', e)
        this.makeNewCard()
      }
    },  
    handleMouseenter() {
      // this.txt='点不着，气不气？就问你气不气'
      // let dom = this.$refs.buka
      // //视口宽度
      // let viewWidth = window.innerWidth
      // //视口高度
      // let viewHeight = window.innerHeight
      // //创建一个视口宽度高度内的随机数
      // let randomX = Math.floor(Math.random() * (viewWidth - dom.clientWidth));
      // let randomY = Math.floor(Math.random() * (viewHeight - dom.clientHeight));
      // dom.style.position = 'fixed'
      // dom.style.left = randomX + 'px'
      // dom.style.top = randomY + 'px'
      // dom.style.zIndex = 999
    },
  },
  mounted() {
    window.addEventListener('keydown', this.handleRegister)
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleRegister)
  }
};
</script>
<style >
/* 日历组件 */
.wh_content_all {
  background: #ffff !important;
  color: #000;
}

.wh_item_date {
  font-size: 0.5rem !important;
  color: #000 !important;
}
.wh_content_li {
  font-size: 0.5rem !important;
  color: #000 !important;
}
.wh_top_tag {
  font-size: 0.5rem !important;
  color: #000 !important;
}

.wh_isMark {
  background: #0fc37c !important;
}

.wh_item_date:hover {
  background: #0fc37c !important;
  border-radius: 50%;
}
/* .wh_isToday{
  background: skyblue !important;
  border-radius: 50%;
} */

.wh_jiantou1 {
  width: 0.5rem !important;
  height: 0.5rem !important;
  border-top: 2px solid rgb(50, 50, 51) !important;
  border-left: 2px solid rgb(50, 50, 51) !important;
}

.wh_jiantou2 {
  width: 0.5rem !important;
  height: 0.5rem !important;
  border-top: 2px solid rgb(50, 50, 51) !important;
  border-right: 2px solid rgb(50, 50, 51) !important;
}
.info {
  display: block;
  margin-left: auto;
}

.infopool {
  margin-top: 20px;
  font-size: 16px;
  text-align: center;
  display: grid;
  grid-template-rows: repeat(3, auto);
  row-gap: 10px;
}
.tlbos {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.tlbos button {
  margin-left: 5px;
  transition: all 0.2s;
}
</style>